<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Book Ranking Visualization</title>
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.3.0/dist/echarts.min.js"></script>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 20px;
    }
    .container {
      width: 80%;
      margin: 0 auto;
    }
    .book-ranking {
      margin-top: 20px;
    }
    #heatmap {
      width: 600px;
      height: 400px;
      margin: 0 auto;
    }
    .input-box {
      margin-bottom: 20px;
    }
  </style>
</head>
<body>

<div class="container">
  <h1>Book Ranking Visualization</h1>

  <div class="input-box">
    <label for="userId">Enter User ID: </label>
    <input type="number" id="userId" placeholder="User ID">
    <button onclick="fetchRanking()">Get Ranking</button>
  </div>

  <div id="heatmap"></div>
  <div id="trendChart"></div>
  <div id="scatterChart"></div>
</div>

<script>
  // Fetch ranking data from backend API
  function fetchRanking() {
    const userId = $('#userId').val();
    if (!userId) {
      alert("Please enter a User ID.");
      return;
    }

    $.ajax({
      url: `http://127.0.0.1:10086/api/ranking/${userId}`,
      method: 'GET',
      success: function(data) {
        // Display heatmap, trend chart, and clustering distribution
        displayHeatmap(data);
        displayTrendChart(data);
        displayClusteringChart(data);
      },
      error: function() {
        alert("Failed to fetch ranking. Please try again.");
      }
    });
  }

  // Display heatmap
  function displayHeatmap(data) {
    const chart = echarts.init(document.getElementById('heatmap'));

    const heatmapData = data.map(item => [item.bookId, item.userId, item.rating]);

    const option = {
      tooltip: {
        position: 'top'
      },
      xAxis: {
        type: 'category',
        data: ['Book 1', 'Book 2', 'Book 3', 'Book 4', 'Book 5']
      },
      yAxis: {
        type: 'category',
        data: ['User 1', 'User 2', 'User 3']
      },
      visualMap: {
        min: 0,
        max: 5,
        show: true,
        calculable: true,
        inRange: {
          color: ['#f5b7b1', '#f39c12', '#16a085']
        }
      },
      series: [{
        name: 'User Preferences',
        type: 'heatmap',
        data: heatmapData,
        label: {
          show: true,
          formatter: function (params) {
            return params.value[2];
          }
        },
        emphasis: {
          itemStyle: {
            borderColor: '#fff',
            borderWidth: 1
          }
        }
      }]
    };

    chart.setOption(option);
  }

  // Display interest trend chart
  function displayTrendChart(data) {
    const chart = echarts.init(document.getElementById('trendChart'));

    const trendData = {
      'User 1': [
        { date: '2021-06-01', rating: 5 },
        { date: '2021-07-01', rating: 3 },
        { date: '2021-08-01', rating: 4 },
        { date: '2021-09-01', rating: 5 }
      ]
    };

    const option = {
      tooltip: {
        trigger: 'axis'
      },
      xAxis: {
        type: 'category',
        data: ['2021-06-01', '2021-07-01', '2021-08-01', '2021-09-01']
      },
      yAxis: {
        type: 'value',
        min: 0,
        max: 5
      },
      series: [{
        name: 'User 1',
        type: 'line',
        data: trendData['User 1'].map(item => item.rating)
      }]
    };

    chart.setOption(option);
  }

  // Display clustering distribution chart
  function displayClusteringChart(data) {
    const chart = echarts.init(document.getElementById('scatterChart'));

    const clusteringData = [
      { x: 10, y: 20, cluster: 1 },
      { x: 20, y: 30, cluster: 1 },
      { x: 30, y: 40, cluster: 2 },
      { x: 40, y: 50, cluster: 2 },
      { x: 50, y: 60, cluster: 3 }
    ];

    const option = {
      tooltip: {
        trigger: 'item',
        formatter: 'Cluster: {c}'
      },
      xAxis: {
        type: 'value',
        name: 'X Coordinate'
      },
      yAxis: {
        type: 'value',
        name: 'Y Coordinate'
      },
      series: [{
        name: 'User Clusters',
        type: 'scatter',
        data: clusteringData.map(item => [item.x, item.y]),
        symbolSize: 10,
        itemStyle: {
          color: '#ff6347'
        }
      }]
    };

    chart.setOption(option);
  }
</script>

</body>
</html>
